<template>
  <div>
    <div>
      <form action="/" style="height:1rem;font-size:0.5rem">
        <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" @focus="focus()"/>
      </form>

      <van-swipe :autoplay="3000" indicator-color="white" :height="150">
        <van-swipe-item>
          <img class="imgs" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="imgs" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="imgs" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="imgs" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="display:flex;margin-top:10%;justify-content: space-around;margin-bottom:1rem">
      <div @click="tab()" class="cel">鉴定</div>
      <div @click="tab1()" class="cel">养护</div>
      <div @click="tab2()" class="cel">求购</div>
      <div @click="tab3()" class="cel">商城</div>
    </div>
    <div class="zuanqu">
      <div class="zq" @click="tab4()">今日推荐</div>
      <div class="zq" @click="tab5()">捡漏专区</div>
    </div>
    <div margin-bottom:0.3rem>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 20%' }">猜您喜欢</van-divider>
    </div>
    <div class="like">
      <!-- <van-card
        style="width:50%"
        v-for="item in list"
        :price="item.goodsPrice"
        :desc="item.gooodsDetail"
        :title="item.brand"
        :thumb="item.imageUrl"
        @click="tap(item.goodsId)"
      />-->
      <van-card
        style="width:50%"
        v-for="item1 in list"
        :price="item1.platformPrice"
        :desc="item1.goodsDetail"
        :title="item1.goodsName"
        :thumb="item1.imageUrl"
        @click="tap6(item1.goodsId)"
      />
    </div>
    <div
      style="position:absolute;
            bottom:0;
            width: 100%;
            height: 1rem;
            "
    >
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="todo-list-o" to="/classes">分类</van-tabbar-item>
        <van-tabbar-item icon="coupon-o" to="/pub">发布</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="like-o" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "index",
  data() {
    return {
      value: "",
      list: [],
      imgs: "",
      active: 0
    };
  },
  methods: {
    onSearch() {
     
    },
    tab() {
      this.$router.push("/jianding");
    },
    tab1() {
      this.$router.push("/yanghu");
    },
    tab2() {
      this.$router.push("/qiugou");
    },
    tab3() {
      this.$router.push("/cart");
    },
    tab4() {
      this.$router.push("/tuijian");
    },
    tab5() {
      this.$router.push("/zuanqu");
    },
     tap6(id) {
      this.$router.push("/details/"+id);
    },
    focus(){
      this.$router.push('/search')
    }
  },
  mounted() {
    // var _this = this;
    // axios({
    //   url: "http://10.8.157.39:8080/secluxury/goods/brandlist",
    // }).then(data => {
    //   console.log(data);
    //   this.list = data.data;
    // });
    axios({
      // url: "http://10.8.157.39:8080/secluxury/type/brandGoodsList "
      url: "http://47.102.221.184:8083/secluxury/type/brandGoodsList"
    })
      .then(data => {
        // console.log(data.data);
        var a = data.data;
        a.map(goods => {
          // console.log(goods.goodsList);
          goods.goodsList.map(yahu => {
            this.list.push(yahu);
            // console.log(yahu);
            // console.log(this.list);
          });
        });
      })
      .catch(err => {
        // console.log(err);
      });
  }
};
</script>
<style scoped>
.cel {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid red;
  border-radius: 20%;
  text-align: center;
  line-height: 1.5rem;
}
.imgs {
  height: 15rem;
  width: 100%;
}
.zuanqu {
  display: flex;
  justify-content: space-around;
  height: 3rem;
  width: 100%;
}
.zuanqu .zq {
  width: 45%;
  height: 3rem;
  border: 1px solid black;
  border-radius: 5%;
  background:url('http://articleimg.xbiao.com/2019/0723/350_224_201907231563878243257.jpg') no-repeat; 
}
.like {
  overflow: auto;
  height: 4rem;
  padding: 0 0.01rem;
  display: flex;
  flex-wrap: wrap;
}
</style>
